<template>
    <div>
        <el-form ref="ruleSearchFormRef" :model="SearchForm" status-icon :rules="rules" class="demo-ruleForm">
            <div class="searchBox">
                <el-form-item prop="customername">
                    <el-input v-model="SearchForm.customername" autocomplete="off" placeholder="请输入客户名称" />
                </el-form-item>
                <!-- 选择客户来源 -->
                <el-form-item prop="customersource">
                    <el-select v-model="SearchForm.customersource" placeholder="请选择客户来源">
                        <el-option label="电话营销" value="TelephoneMarketing " />
                        <el-option label="微信营销" value="WeChatMarketing " />
                        <el-option label="SEM" value="SEM" />
                        <el-option label="信息流" value="InformationFlow " />
                        <el-option label="客户介绍" value="CustomerIntroduction " />
                        <el-option label="独立开发" value="IndependentDevelopment" />
                        <el-option label="社群" value="Community " />
                        <el-option label="其他" value="Others" />
                    </el-select>
                </el-form-item>
                <!-- 选择客户等级 -->
                <el-form-item prop="customerlevel">
                    <el-select v-model="SearchForm.customerlevel" placeholder="请输入客户等级">
                        <el-option label="SSS" value="SSS" />
                        <el-option label="SS" value="SS" />
                        <el-option label="S" value="S" />
                        <el-option label="A" value="A" />
                        <el-option label="B" value="B" />
                        <el-option label="C" value="C" />
                        <el-option label="D" value="D" />
                    </el-select>
                </el-form-item>
                <!-- 选择跟进状态 -->
                <el-form-item prop="followupstatus">
                    <el-select v-model="SearchForm.followupstatus" placeholder="请选择跟进状态">
                        <el-option label="初次沟通" value="FirstCommunication" />
                        <el-option label="方案报价" value="SolutionQuotation" />
                        <el-option label="邀约进行" value="InvitationToProceed" />
                        <el-option label="商务谈判" value="BusinessNegotiation" />
                        <el-option label="拟定合同" value="DrawUpAContract" />
                        <el-option label="签订合同" value="signingTheContract" />
                        <el-option label="结束跟进" value="EndFollowUp" />
                    </el-select>
                </el-form-item>
            </div>
            <!-- 查询 重置 -->
            <el-form-item class="itemButton">
                <el-button type="primary" @click="submitSearchForm">查询</el-button>
                <el-button @click="resetSearchForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import noEmptySearchObject from '@/utils/Tools/JudgmentObject';
import { useRoute, useRouter } from 'vue-router';

const ruleSearchFormRef = ref<FormInstance>()
const rules = reactive<FormRules<typeof SearchForm>>({})
const route = useRoute()
const router = useRouter()
const SearchForm = reactive({
    customername: '',
    customersource: '',
    customerlevel: '',
    followupstatus: "",
})


//props数据
interface IProps {
    pageSize: number
    page: number
    loadData: (page?: number, pageSize?: number, query?: object) => void
}
const props = defineProps<IProps>()
//查询
const submitSearchForm = () => {
    let query = noEmptySearchObject(SearchForm)
    let querqData = {} as any
    if (query !== null) {
        querqData = query
    }
    props.loadData(props.page, props.pageSize, querqData)
    router.replace({ query: { ...querqData, page: props.page, pageSize: props.pageSize } })
}

//重置
const resetSearchForm = () => {
    if (!ruleSearchFormRef.value) return
    ruleSearchFormRef.value.resetFields()
}
</script>
  

<style lang="scss" scoped>
.el-form {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .searchBox {
        width: 50%;
        display: flex;
        justify-content: flex-start;
        align-items: center;


        .el-form-item {


            .el-input,
            .el-select {
                width: 150px;
            }

            margin-bottom: 0px;
            margin: 0 5px;
        }
    }

    .itemButton {
        width: 150px;
        height: 60px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 18px;
        margin-top: 20px;

        .el-button {
            height: 30px;
        }
    }
}

.el-form .searchBox .el-form-item:first-child {
    margin-left: 25px;
}
</style>